<template>
  <d2-container>
    <div class="flex-1 ml-2">
      <el-table :data="userList" border stripe>
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="序号" type="index" width="65" />
        <el-table-column align="center" label="用户名" prop="username" width="120" />
        <el-table-column align="center" label="手机号" prop="phone" width="120" />
        <el-table-column align="center" label="邮箱" prop="email" width="125" />
        <el-table-column align="center" label="标识" prop="mark_id" width="95" />
        <el-table-column align="center" label="职务" prop="duties_name" width="135" />
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handlAutheEdit(scope.row)"
              v-if="scope.row.is_superuser == false">权限管理</el-button>
            <el-button size="mini" @click="handleEdit(scope.row)" v-if="scope.row.is_superuser == false">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" title="添加/编辑职务">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <div style="width: 50%;">
            <el-input v-model="form.username"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <div style="width: 50%;">
            <el-input v-model="form.email"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <div style="width: 50%;">
            <el-input v-model="form.phone"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="管理员" prop="is_staff">
          <el-switch v-model="form.is_staff"></el-switch>
        </el-form-item>
        <el-form-item label="职务" prop="duties">
          <el-select v-model="form.duties" placeholder="请选择职务">
            <el-option v-for="item in dutiesList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogAuthVisible" width="60%" title="设置权限">
      <el-form :model="formAuth" ref="form" label-width="80px">
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsProduct">
            <div class="font-s-2 mr-2">商品模块</div>
            <div class="check-box row" :class=" formAuth.is_product == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="row-ac ml-4 my-1">
          <div>
            <div class="row-ac ml-2" @click="onIsProductmanag">
              <div class="font-s-2 mr-2">商品管理</div>
              <div class="check-box row" :class=" formAuth.is_productmanag == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsProductbrand">
              <div class="font-s-2 mr-2">品牌管理</div>
              <div class="check-box row" :class=" formAuth.is_productbrand == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsProductcategory">
              <div class="font-s-2 mr-2">分类管理</div>
              <div class="check-box row"
                :class=" formAuth.is_productcategory == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsPromotion">
            <div class="font-s-2 mr-2">促销管理</div>
            <div class="check-box row" :class=" formAuth.is_promotion == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="row-ac ml-4 my-1">
          <div>
            <div class="row-ac ml-2" @click="onIsLottery">
              <div class="font-s-2 mr-2">摇奖模块</div>
              <div class="check-box row" :class=" formAuth.is_lottery == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsPicture">
            <div class="font-s-2 mr-2">图片管理</div>
            <div class="check-box row" :class=" formAuth.is_picture == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="row-ac ml-4 my-1">
          <div>
            <div class="row-ac ml-2" @click="onIsadver">
              <div class="font-s-2 mr-2">广告管理</div>
              <div class="check-box row" :class=" formAuth.is_adver == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsclassification">
              <div class="font-s-2 mr-2">广告分类</div>
              <div class="check-box row"
                :class=" formAuth.is_classification == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsorder">
            <div class="font-s-2 mr-2">订单模块</div>
            <div class="check-box row" :class=" formAuth.is_order== true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="row-ac ml-4 py-1">
          <div>
            <div class="row-ac ml-2" @click="onIsproOrder">
              <div class="font-s-2 mr-2">广告管理</div>
              <div class="check-box row" :class=" formAuth.is_proOrder == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIscontent">
            <div class="font-s-2 mr-2">内容管理</div>
            <div class="check-box row" :class=" formAuth.is_content == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="row-ac ml-4 py-1">
          <div>
            <div class="row-ac ml-2" @click="onIsarticle">
              <div class="font-s-2 mr-2">文章权限</div>
              <div class="check-box row" :class=" formAuth.is_article == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsarticleClass">
              <div class="font-s-2 mr-2">文章分类</div>
              <div class="check-box row" :class=" formAuth.is_articleClass == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsnews">
              <div class="font-s-2 mr-2">新闻权限</div>
              <div class="check-box row" :class=" formAuth.is_news == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsnewsCategory">
              <div class="font-s-2 mr-2">新闻分类</div>
              <div class="check-box row" :class=" formAuth.is_newsCategory == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsmanagenovel">
            <div class="font-s-2 mr-2">小说管理</div>
            <div class="check-box row" :class=" formAuth.is_managenovel == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="row-ac ml-4 py-1">
          <div>
            <div class="row-ac ml-2" @click="onIschapter">
              <div class="font-s-2 mr-2">小说章节</div>
              <div class="check-box row" :class=" formAuth.is_chapter == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsnovel">
              <div class="font-s-2 mr-2">小说权限</div>
              <div class="check-box row" :class=" formAuth.is_novel == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsnovelCategory">
              <div class="font-s-2 mr-2">小说分类</div>
              <div class="check-box row" :class=" formAuth.is_novelCategory == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsanswer">
            <div class="font-s-2 mr-2">解题模块</div>
            <div class="check-box row" :class=" formAuth.is_answer == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="row-ac ml-4">
          <div>
            <div class="row-ac ml-2" @click="onIsexamination">
              <div class="font-s-2 mr-2">试卷权限</div>
              <div class="check-box row" :class=" formAuth.is_examination == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
          <div class="ml-2">
            <div class="row-ac ml-2" @click="onIsanswertypes">
              <div class="font-s-2 mr-2">类型权限</div>
              <div class="check-box row" :class=" formAuth.is_answertypes == true ? 'check-box-bg2' :'check-box-bg1' ">
                <div class="iconfont icon-gou"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsmerchant">
            <div class="font-s-2 mr-2">商户模块</div>
            <div class="check-box row" :class=" formAuth.is_merchant == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsusers">
            <div class="font-s-2 mr-2">会员管理</div>
            <div class="check-box row" :class=" formAuth.is_users == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIswebsite">
            <div class="font-s-2 mr-2">网站设置</div>
            <div class="check-box row" :class=" formAuth.is_website == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
        <div class="flex-1 py-1" style="background-color: #F9F9F9;">
          <div class="row-ac ml-2" @click="onIsfinance">
            <div class="font-s-2 mr-2">财务管理</div>
            <div class="check-box row" :class=" formAuth.is_finance == true ? 'check-box-bg2' :'check-box-bg1' ">
              <div class="iconfont icon-gou"></div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAuthVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAuthForm">保存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>
<script>
  import {
    userListUrl,
    userUrl,
    userDetailUrl,
    userPatchUrl,
    dutiesUrl,
    moduleauthCreateUrl,
    moduleauthDetailUrl,
    moduleauthUpdateUrl,
  } from "@/utils/interface"
  import {
    patch
  } from '@/utils/request'
  export default {
    name: 'userList',
    data() {
      return {
        dialogVisible: false,
        userList: [],
        queryInfo: {
          is_staff: 'True'
        },
        form: {
          username: '',
          email: '',
          phone: '',
          is_staff: '',
          duties: '',
        },
        rules: {
          username: [{
            required: true,
            message: '请输入职务名称',
            trigger: 'blur'
          }]
        },
        dutiesList: [],
        takeUserId: '',
        formAuth: {
          user: '',
          is_product: false,
          is_productmanag: false,
          is_productbrand: false,
          is_productcategory: false,
          is_promotion: false,
          is_lottery: false,
          is_picture: false,
          is_adver: false,
          is_classification: false,
          is_order: false,
          is_proOrder: false,
          is_content: false,
          is_articleClass: false,
          is_article: false,
          is_newsCategory: false,
          is_news: false,
          is_managenovel: false,
          is_chapter: false,
          is_novel: false,
          is_novelCategory: false,
          is_answer: false,
          is_examination: false,
          is_answertypes: false,
          is_merchant: false,
          is_users: false,
          is_website: false,
          is_finance: false,
        },
        dialogAuthVisible: false,
        moduleauthId: '',
      }
    },
    created() {
      this.initData()
    },
    methods: {
      onIsProduct() {
        this.formAuth.is_product = !this.formAuth.is_product
      },
      onIsProductmanag() {
        this.formAuth.is_productmanag = !this.formAuth.is_productmanag
      },
      onIsProductbrand() {
        this.formAuth.is_productbrand = !this.formAuth.is_productbrand
      },
      onIsProductcategory() {
        this.formAuth.is_productcategory = !this.formAuth.is_productcategory
      },
      onIsPromotion() {
        this.formAuth.is_promotion = !this.formAuth.is_promotion
      },
      onIsLottery() {
        this.formAuth.is_lottery = !this.formAuth.is_lottery
      },
      onIsPicture() {
        this.formAuth.is_picture = !this.formAuth.is_picture
      },
      onIsadver() {
        this.formAuth.is_adver = !this.formAuth.is_adver
      },
      onIsclassification() {
        this.formAuth.is_classification = !this.formAuth.is_classification
      },
      onIsorder() {
        this.formAuth.is_order = !this.formAuth.is_order
      },
      onIsproOrder() {
        this.formAuth.is_proOrder = !this.formAuth.is_proOrder
      },
      onIscontent() {
        this.formAuth.is_content = !this.formAuth.is_content
      },
      onIsarticleClass(){
        this.formAuth.is_articleClass = !this.formAuth.is_articleClass
      },
      onIsarticle(){
        this.formAuth.is_article = !this.formAuth.is_article
      },
      onIsnewsCategory(){
        this.formAuth.is_newsCategory = !this.formAuth.is_newsCategory
      },
      onIsnews(){
        this.formAuth.is_news = !this.formAuth.is_news
      },
      onIsmanagenovel(){
        this.formAuth.is_managenovel = !this.formAuth.is_managenovel
      },
      onIschapter(){
        this.formAuth.is_chapter = !this.formAuth.is_chapter
      },
      onIsnovel(){
        this.formAuth.is_novel = !this.formAuth.is_novel
      },
      onIsnovelCategory(){
        this.formAuth.is_novelCategory = !this.formAuth.is_novelCategory
      },
      onIsanswer(){
        this.formAuth.is_answer= !this.formAuth.is_answer
      },
      onIsexamination(){
        this.formAuth.is_examination = !this.formAuth.is_examination
      },
      onIsanswertypes(){
        this.formAuth.is_answertypes = !this.formAuth.is_answertypes
      },
      onIsmerchant(){
        this.formAuth.is_merchant = !this.formAuth.is_merchant
      },
      onIsusers(){
        this.formAuth.is_users = !this.formAuth.is_users
      },
      onIswebsite(){
        this.formAuth.is_website = !this.formAuth.is_website
      },
      onIsfinance(){
        this.formAuth.is_finance = !this.formAuth.is_finance
      },
      initData() {
        this.getUserList()
        this.getDuties()
      },
      getUserList() {
        this.$get(userListUrl, this.queryInfo).then(res => {
          this.userList = res.data.data.list
        })
      },
      getDuties() {
        this.$get(dutiesUrl).then(res => {
          this.dutiesList = res.data.data.list
        })
      },
      clickCancel() {
        this.dialogVisible = false
        this.form = {}
      },
      submitForm() {
        patch(userPatchUrl + this.takeUserId + '/', this.form).then(res => {
          this.dialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.getUserList()
        })
      },
      handleEdit(item) {
        this.dialogVisible = true
        this.takeUserId = item.id
        this.$get(userDetailUrl + item.id + '/').then(res => {
          this.form = {
            username: res.data.data.username,
            email: res.data.data.email,
            phone: res.data.data.phone,
            is_staff: res.data.data.is_staff,
            duties: res.data.data.duties,
          }
        })
      },
      handlAutheEdit(item) {
        if (item.moduleauths.length == 0) {
          this.formAuth.user = item.id
          this.$post(moduleauthCreateUrl, this.formAuth).then(res => {
            if (res.data.code == 200) {
              this.dialogAuthVisible = true
              this.moduleauthId = res.data.data.id
              this.getModuleauthDetail(this.moduleauthId)
              this.$message({
                message: '添加成功',
                type: 'success'
              });
            }
          })
        } else {
          this.dialogAuthVisible = true
          this.moduleauthId = item.moduleauths[0].id
          this.getModuleauthDetail(this.moduleauthId)
        }
      },
      getModuleauthDetail(moduleauthId) {
        this.$get(moduleauthDetailUrl + moduleauthId + '/').then(res => {
          if (res.data.code == 200) {
            this.formAuth = {
              user: res.data.data.user,
              is_product: res.data.data.is_product,
              is_productmanag: res.data.data.is_productmanag,
              is_productbrand: res.data.data.is_productbrand,
              is_productcategory: res.data.data.is_productcategory,
              is_promotion: res.data.data.is_promotion,
              is_lottery: res.data.data.is_lottery,
              is_picture: res.data.data.is_picture,
              is_adver: res.data.data.is_adver,
              is_classification: res.data.data.is_classification,
              is_order: res.data.data.is_order,
              is_proOrder: res.data.data.is_proOrder,
              is_content: res.data.data.is_content,
              is_articleClass: res.data.data.is_articleClass,
              is_article: res.data.data.is_article,
              is_newsCategory: res.data.data.is_newsCategory,
              is_news: res.data.data.is_news,
              is_managenovel: res.data.data.is_managenovel,
              is_chapter: res.data.data.is_chapter,
              is_novel: res.data.data.is_novel,
              is_novelCategory: res.data.data.is_novelCategory,
              is_answer: res.data.data.is_answer,
              is_answertypes: res.data.data.is_answertypes,
              is_examination: res.data.data.is_examination,
              is_merchant: res.data.data.is_merchant,
              is_users: res.data.data.is_users,
              is_website: res.data.data.is_website,
              is_finance: res.data.data.is_finance,
            }
          }
        })
      },
      submitAuthForm() {
        this.$put(moduleauthUpdateUrl + this.moduleauthId + '/', this.formAuth).then(res => {
          if (res.data.code == 200) {
            this.dialogAuthVisible = false
            this.formAuth = {}
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .check-box {
    width: 14px;
    height: 14px;
    border-radius: 2px;

    .iconfont {
      font-size: 10px;
      color: #fff;
    }
  }

  .check-box-bg1 {
    background-color: #fff;
    border: 1px solid #DDDDDD;
  }

  .check-box-bg2 {
    background-color: #409eff;
    border: 1px solid #409eff;
  }
</style>
